<template>
  <div class="editSubject">
    <!-- 题目编辑 -->
    <!-- :width="type==='3'?'35%':'50%'" -->
    <el-dialog
      :title="formData.id?'编辑':'新增'"
      :visible.sync="dialogVisible"
      :show-close="false"
      append-to-body
      :before-close="closeDailog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <FormContainer v-if="type===3||formData.questionType===3||formData.chapterType===3" :column="1">
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item prop="questionTitle" label="大标题">
            <el-input v-model.trim="formData.questionTitle" tip :maxlength="100" />
          </el-form-item>
        </el-form>
      </FormContainer>
      <div v-else>
        <el-radio-group v-if="formData.questionType===null" v-model="formData.questionType">
          <!-- <el-radio-group v-model="formData.questionType"> -->
          <el-radio-button label>选择题</el-radio-button>
          <el-radio-button :label="2">填空题</el-radio-button>
        </el-radio-group>
        <div class="subject-area">
          <FormContainer
            v-if="formData.questionType!==2&&formData.questionType!==null"
            :column="1"
          >
            <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
              <el-form-item prop="questionType" :label="formData.id?(formData.displaySerialNumber+1+'、'):indexNum+'、'">
                <div class="answer-option">
                  <span style="margin-right:15px">题型</span>
                  <el-select v-model="formData.questionType">
                    <el-option label="单选" :value="0" />
                    <el-option label="多选" :value="1" />
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item prop="questionTitle">
                <div style="display:flex;align-items:center">
                  <el-input v-model="formData.questionTitle" type="textarea" :autosize="{minRows:1}" placeholder="请输入题目" :maxlength="100" clearable />
                  <!-- <el-input
                    v-if="isScore===1"
                    v-model.trim="formData.totalScore"
                    v-number-input
                    style="width:80px"
                    placeholder="分值"
                    clearable
                  /> -->
                </div>
              </el-form-item>
              <el-form-item>
                <table class="answer_table">
                  <!-- <tr>
                    <td>选项</td>
                    <td>选项文字</td>
                    <td>分值</td>
                    <td>允许填空</td>
                    <td>删除</td>
                  </tr> -->
                  <tr v-for="(item,index) in formData.questionOptionDTOList" :key="index">
                    <td>{{ transNum(index) }}</td>
                    <td>
                      <el-input v-model.trim="item.optionContent" type="textarea" :autosize="{minRows:1}" placeholder="请输入选项内容" :maxlength="100" clearable />
                    </td>
                    <td>
                      <el-input v-if="isScore===1" v-model.trim="item.scoreValue" v-number-input placeholder="分值" style="width:60px" clearable />
                    </td>
                    <td>
                      <!-- <el-checkbox v-if="isScore===0" v-model="item.isEnter">允许填空</el-checkbox> -->
                      <el-checkbox v-model="item.isEnter">允许填空</el-checkbox>
                    </td>
                    <!-- <td>
                      <el-checkbox v-if="isScore===1" v-model="item.deducted">扣分</el-checkbox>
                    </td> -->
                    <td>
                      <i class="el-icon-delete" @click="deletOption(item,index)" />
                    </td>
                  </tr>
                </table>
              </el-form-item>
              <el-form-item>
                <div class="add-btns" @click="addOption()">
                  <i class="el-icon-plus" />
                  <span>添加选项</span>
                </div>
              </el-form-item>
            </el-form>
          </FormContainer>
          <FormContainer v-if="formData.questionType===2" :column="1">
            <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
              <el-form-item prop="questionTitle" :label="formData.displaySerialNumber+1+'、'">
                <div style="display:flex;align-items:center">
                  <el-input v-model="formData.questionTitle" type="textarea" :autosize="{minRows:1}" :maxlength="500" placeholder="请输入题目" clearable />
                  <!-- <el-input
                    v-if="isScore===1"
                    v-model.trim="formData.totalScore"
                    v-number-input
                    style="width:80px"
                    placeholder="分值"
                    clearable
                  /> -->
                </div>
              </el-form-item>
              <el-form-item>
                <table class="answer_table">
                  <!-- <tr>
                    <td>描述</td>
                    <td>答题框</td>
                    <td>分值</td>
                    <td>删除</td>
                  </tr> -->
                  <tr v-for="(item,index) in formData.questionOptionDTOList" :key="index">
                    <td>
                      <el-input v-model.trim="item.optionContent" type="textarea" :autosize="{minRows:1}" :maxlength="500" placeholder="不输入描述则不展示" clearable />
                    </td>
                    <td>
                      <el-input v-model="item.enterContent" type="textarea" :autosize="{minRows:1}" :maxlength="1000" placeholder="填空题答题区" clearable />
                    </td>
                    <td>
                      <el-input v-if="isScore===1" v-model="item.scoreValue" placeholder="分值" style="width:60px" clearable />
                    </td>
                    <td>
                      <i class="el-icon-delete" @click="deletOption(item,index)" />
                    </td>
                  </tr>
                </table>
              </el-form-item>

              <el-form-item prop="title">
                <div class="add-btns" @click="addOption()">
                  <i class="el-icon-plus" />
                  <span>添加输入框</span>
                </div>
              </el-form-item>
            </el-form>
          </FormContainer>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" :loading="loading" @click="confrim(false)">保存并返回</Button>
        <Button type="primary" :loading="loading" @click="confrim(true)">保存并添加</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Button from '@/components/Button'
import FormContainer from '@/components/FormContainer'
import { deepCopy } from '@/utils'
import {
  questionnaireItemAdd,
  questionnaireItemUpdate
} from '@/api/questionnaire'
export default {
  name: 'EditSubject',
  components: {
    Button,
    FormContainer
  },
  props: {
    questionnaireId: {
      // 问卷id
      type: String,
      default: ''
    },
    chapterId: {
      // 章节id
      type: String,
      default: null
    },
    isScore: {
      // 问卷类型
      type: [Number, String],
      default: ''
    },
    type: {
      // 新增章节时传入3，其他不传
      type: Number,
      default: null
    },
    indexNum: {
      // 题号。新增时传入
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {},
      formRules: {
        questionTitle: {
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        },
        questionType: {
          required: true,
          message: '请选择题型',
          trigger: 'change'
        }
      },
      deleteOptionDTOList: [],
      dataBack: undefined // 用来恢复数据
    }
  },
  methods: {
    openDailog(data) {
      this.deleteOptionDTOList = []
      if (data) {
        this.dataBack = deepCopy(data)
        if (data.questionOptionDTOList) {
          data.questionOptionDTOList.forEach(e => {
            e.isEnter = (e.isEnter === 1)
          })
        }
        data.questionTitle = data.questionTitle || data.chapterTitle
        if (data.displaySerialNumber) {
          data.displaySerialNumber = data.displaySerialNumber - 1
        }
        this.formData = data
      } else {
        this.formData = {
          displaySerialNumber: 0,
          isScore: this.isScore,
          questionOptionDTOList: [
            {
              enterContent: '', // 输入内容
              isEnter: false, // 是否可输入
              optionContent: '', // 选项内容
              questionId: '', // 所属题目
              scoreValue: '' // 选项分数
            }
          ],
          questionTitle: '', // 题目标题
          questionType: null, // 题目类型：0单选1多选2填空3段落
          questionnaireId: '',
          totalScore: '' // 题目总分
        }
      }
      this.dialogVisible = true
    },
    deletOption(obj, index) {
      if (obj.id) {
        obj.isEnter = obj.isEnter ? 1 : 0
        this.deleteOptionDTOList.push(obj)
      }
      this.formData.questionOptionDTOList.splice(index, 1)
      this.$forceUpdate()
    },
    closeDailog() {
      this.dialogVisible = false
    },
    // 确定
    confrim(dialogVisible = false) {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formData.questionOptionDTOList) {
            this.formData.questionOptionDTOList.forEach(e => {
              e.isEnter = e.isEnter ? 1 : 0
              e.questionId = this.formData.id ? this.formData.id : e.questionId
            })
          }
          var reqData = JSON.parse(JSON.stringify(this.formData))
          reqData.questionnaireId = reqData.questionnaireId ? reqData.questionnaireId : this.questionnaireId
          reqData.questionType = reqData.questionType !== null ? reqData.questionType : this.type
          if (reqData.questionType === 3) {
            reqData.questionOptionDTOList = []
          }
          this.loading = true
          if (reqData.id) {
            reqData.deleteOptionDTOList = this.deleteOptionDTOList
            reqData.addOrUpdateOptionDTOList = this.formData.questionOptionDTOList
            questionnaireItemUpdate(reqData)
              .then(res => {
                this.loading = false
                if (res.success) {
                  this.$emit('confrimFunc', reqData)
                  this.dialogVisible = dialogVisible
                  if (dialogVisible) {
                    this.openDailog(this.dataBack)
                  }
                }
              })
              .catch(er => {
                this.loading = false
              })
          } else {
            reqData.displaySerialNumber = this.indexNum + 1
            reqData.chapterId = this.chapterId
            questionnaireItemAdd(reqData)
              .then(res => {
                this.loading = false
                if (res.success) {
                  this.$emit('confrimFunc', reqData)
                  this.dialogVisible = dialogVisible
                  if (dialogVisible) {
                    this.openDailog(this.dataBack)
                  }
                }
              })
              .catch(er => {
                this.loading = false
              })
          }
        }
      })
    },

    transNum(num) {
      var ary = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']
      return ary[num]
    },
    addOption() {
      this.formData.questionOptionDTOList.push({
        enterContent: '', // 输入内容
        isEnter: false, // 是否可输入
        optionContent: '', // 选项内容
        questionId: '', // 所属题目
        scoreValue: '' // 选项分数
      })
      this.$forceUpdate()
    }
  }
}
</script>
<style lang='scss' scoped>
.editSubject{
  [class*="el-dialog__body"]{
    padding: 10px;
  }
}
.subject-area {
  padding-top: 15px;
  min-height: 200px;
}
.answer_table {
  width: 100%;
  td {
    text-align: center;
    height: 40px;
    i {
      cursor: pointer;
    }
  }
}
.add-btns {
  cursor: pointer;
  display: inline-block;
  :hover{
    color:#16BC83
  }
}
</style>
